<template>
    <div class="history">
        <header-a/>
        <div class="h1 mar-center">

            <div class="h11">
                <span class="h27" v-if="$route.params.type === '1'" @click="nav(2)">语音转文字</span>
                <span class="h27" v-else @click="nav(1)">文字转语音</span>
                >
                <span v-if="$route.params.type === '1'">历史识别</span>
                <span v-else>历史合成</span>

            </div>

            <div class="h12 text-center" v-if="$route.params.type === '1'">历史识别</div>
            <div class="h12 text-center" v-else>历史合成</div>

            <div class="h13 container-justf text-center">
                <div :class="['h14', type === 0 && 'active']" @click="toggleType(0)">识别中</div>
                <div :class="['h14', type === 1 && 'active']" @click="toggleType(1)">已识别</div>
                <div :class="['h14', type === 2 && 'active']" @click="toggleType(2)">已失效</div>
            </div>

            <div class="h15 container-align text-center">
                <div class="h16">时间</div>
                <div class="h17">文件</div>
                <div class="h17">类型</div>
                <div class="h17" v-if="$route.params.type === '1'">时长</div>
                <div class="h17" v-else>字数</div>
                <div class="h16 container-align" v-if="type === 1">
                    <div class="check-box" style="border: 1px solid #C1C1C1;" @click="allSel">
                        <img src="../assets/img/25.png" alt="" v-if="chooseAll"/>
                    </div>
                    <div>全选</div>
                </div>
                <div class="h16" v-else>状态</div>
            </div>

            <div class="table text-center">
                <template v-if="d.length">
                    <div class="h19 container" v-for="(i, index) in d" :key="index">
                        <div class="h20">{{i.batch}}</div>
                        <div class="h21">
                            <div class="container-align" v-for="(item, indexT) in i.data" :key="item.id" >
                                <div class="h22">{{item.name}}</div>
                                <div class="h22">{{item.type}}</div>

                                <div class="h22" v-if="$route.params.type === '1'">{{item.length}}s</div>
                                <div class="h22" v-else>{{item.length}}字</div>

                                <div class="h23" v-if="type === 0">识别中..</div>
                                <div class="h24 container-justf" v-else-if="type === 1">
                                    <div class="check-box" @click="choose(index, indexT)">
                                        <img src="../assets/img/25.png" v-if="item.check" alt=""/>
                                    </div>
                                    <div style="visibility: hidden;">全选</div>
                                </div>
                                <div class="h25" v-else-if="type === 2">已失效</div>
                            </div>
                        </div>
                    </div>
                </template>
                <div v-else style="padding-top: 50px">暂无数据</div>
            </div>


            <div class="container" style="justify-content: space-between;padding-right: 52px">
                <div class="h18">注：音频文件只提供暂存72小时的服务，请尽快下载...</div>
                <div class="h26 text-center" v-if="type === 1" @click="download">下载</div>
            </div>

        </div>

        <Bottom/>

    </div>
</template>

<script>
import HeaderA from "@/components/child/Header";
import Bottom from "@/components/Bottom";
import api from '../utils/api'

// $route.params.type 0 文字转语音  1 语音转文字
export default {
    name: "History",
    components: { HeaderA, Bottom },
    data () {
        return {
            type: 0,
            chooseAll: false,
            d: [
                /*{
                  id: 1,
                  batch: '20200930 10:12:20',
                  data: [
                    {id: 1, name: '2020091001', type: 'TXT', length: '200', check: true},
                    {id: 2, name: '2020091002', type: 'TXT', length: '200', check: false},
                    {id: 3, name: '2020091002', type: 'TXT', length: '200', check: true}
                  ]
                },
                {
                  id: 2,
                  batch: '20200930 10:12:20',
                  data: [
                    {id: 1, name: '2020091001', type: 'TXT', length: '200', check: false},
                    {id: 2, name: '2020091002', type: 'TXT', length: '200', check: false},
                    {id: 3, name: '2020091002', type: 'TXT', length: '200', check: true}
                  ]
                }*/
            ]
        };
    },
    created () {
        this.findHistory()
    },
    methods: {
        nav (type) {
            switch (type) {
                case 1:
                    this.$router.push('/word-to-voice')
                    break;
                case 2:
                    this.$router.push('/voice-to-word')
                    break;
            }
        },
        download () {
            let ids = '';
            this.d.forEach(v => {
                v.data.forEach(val => {
                    if (val.check) ids = (ids === '' ? val.id : (ids + ',' + val.id))
                })
            })
            window.open(api.download + '?ids=' + ids)
        },
        async findHistory () {
            let res = await this.$http.post('findHistory', {
                "wxId": this.$root.wxId,
                "type": this.$route.params.type,          // 0-文字转语音 1-语音转文字
                "status": this.type.toString()         // // 0-识别中 1-已识别 2-已失效
            });
            console.log(res)
            const m = res.data.data;
            if (this.type === 1) {
                this.d = m.map(v => {
                    v.data = v.data.map(val => {
                        val.check = false;
                        return val;
                    })
                    return v
                })
            } else {
                this.d = m
            }
        },

        toggleType (type) {
            this.type = type;
            this.findHistory();
        },
        choose (i, j) {
            const m = this.d[i].data[j];
            this.$set(m, 'check', !m.check);
            this.d.map(v => {
                v.check = v.data.every(val => val.check);
                return v
            })
            this.chooseAll = this.d.every(val => val.check);
        },
        allSel () {
            this.chooseAll = !this.chooseAll;
            this.d.map(v => {
                v.data = v.data.map(val => {
                    val.check = this.chooseAll;
                    return val
                });
                return v
            })
        }
    }
}
</script>

<style scoped lang="scss">
.history {
    .h1 {
        width: 1200px;
        padding-bottom: 405px;
        .check-box{
            width: 24px;
            height: 24px;
            background-color: #FFFFFF;
            margin-right: 12px;
            cursor: pointer;
            img{
                width: 22px;
                height: 22px;
                position: relative;
                bottom: 2px;
            }
        }
        .h19{
            margin-bottom: 12px;
            background-color: rgba(232,232,232, 0.4);
            padding-top: 27px;
            padding-bottom: 27px;
        }
        .table{
            height: 500px;
            overflow-y: auto;
        }
        .h23{
            font-size: 16px;
            font-weight: 500;
            color: #FFCB79;
            height: 52px;
            line-height: 52px;
        }
        .h24, .h23, .h25{
            width: 29.87%;
        }
        .h25{
            font-size: 16px;
            color: rgba(0, 0, 0, 0.4);
            height: 52px;
            line-height: 52px;
        }
        .h18{
            height: 22px;
            font-size: 16px;
            line-height: 22px;
            color: rgba(0,0,0, 0.4);
            padding-left: 48px;
            margin-top: 10px;
        }
        .h26{
            width: 138px;
            height: 52px;
            background-color: #FFCB79;
            font-size: 16px;
            line-height: 52px;
            color: #FFFFFF;
            cursor: pointer;
        }
        .h22{
            width: 20.78%;
            height: 52px;
            line-height: 52px;
        }
        .h16,.h17{
            font-size: 16px;
            color: #000000;
        }
        .h16{
            width: 23%;
            justify-content: center;
        }
        .h20{
            width: 23%;
            height: 52px;
            line-height: 52px;
        }
        .h20, .h22{
            font-size: 16px;
            color: #000000;
        }
        .h21{
            flex-grow: 1;
        }
        .h17{
            width: 16%;
        }
        .h15{
            height: 44px;
            background-color: rgba(232,232,232, 0.4);
            margin-bottom: 6px;
            margin-top: 46px;
        }
        .h14.active{
            width: 151px;
            height: 42px;
            line-height: 42px;
            background-color: #26C6AB;
            font-size: 16px;
            color: #FFFFFF;
        }
        .h14{
            width: 151px;
            height: 42px;
            line-height: 42px;
            background-color: #E8E8E8;
            font-size: 16px;
            color: #000000;
            cursor: pointer;
            transition: all 0.3s;
        }
        .h12{
            height: 64px;
            font-size: 30px;
            line-height: 42px;
            color: #000000;
            padding-top: 10px;
            padding-bottom: 12px;
            border-bottom: 1px solid #C1C1C1;
            margin-bottom: 46px;
        }
        .h11{
            padding-top: 96px;
            line-height: 20px;
            color: rgba(0,0,0,0.6);
            .h27{
                cursor: pointer;
            }
        }

    }
}
</style>